<template>
  <view class="edit-page">
    <view class="form">
      <view class="info">
        <span class="info-title">商家名称：</span>
        <u-input placeholder="请输入商家名称" class="info-input disabled" v-model="name" disabled/>
      </view>

      <u-cell-item title="商家分类" class="active" :value="select_tips" @click="show=true"></u-cell-item>

      <view class="info2">
        <view class="info-title">商家图片：</view>
        <view class="img-box">
          <div class="img-item" v-for="(item,index) of imgUrlList" :key="index">
            <image class="img-icon" src="../../static/cha-icon.png" mode="" @click="delImg(index)"></image>
            <image class="img" :src="item.img_url" mode=""></image>
          </div>
          <div class="img-item">
            <image class="img" :src="img_url" mode="" @click="chooseImg" v-if="imgUrlList.length<5"></image>
          </div>
        </view>
      </view>

      <view class="info2">
        <span class="info-title">商家介绍：</span>
        <view class="editor-container">

          <view class="edit-area">
            <!-- 撤销 -->
            <i class="iconfont icon-undo" @click="handleEvent('undo')"></i>
            <!-- 恢复 -->
            <i class="iconfont icon-redo" @click="handleEvent('redo')"></i>

            <!-- 标题 1 ~ 6 -->
            <i class="iconfont icon-format-header-1" @click="format('header', 'H1')"></i>
            <i class="iconfont icon-format-header-2" @click="format('header', 'H2')"></i>
            <i class="iconfont icon-format-header-3" @click="format('header', 'H3')"></i>
            <i class="iconfont icon-format-header-4" @click="format('header', 'H4')"></i>
            <i class="iconfont icon-format-header-5" @click="format('header', 'H5')"></i>
            <i class="iconfont icon-format-header-6" @click="format('header', 'H6')"></i>

            <!-- 增加左边缩进 -->
            <i class="iconfont icon-indent" @click="format('indent', '+1')"></i>
            <!-- 减少左边缩进 -->
            <i class="iconfont icon-outdent" @click="format('indent', '-1')"></i>

            <!-- 增大字体 -->
            <i class="iconfont icon-fontsize" @click="format('fontSize', '20px')"></i>

            <!-- 字体颜色 -->
            <i class="iconfont icon-text_color" @click="format('color', '#f00')"></i>

            <!-- 清空富文本所有内容 -->
            <i class="iconfont icon-clearup" @click="handleEvent('clear')"></i>

            <!-- 文本背景颜色 -->
            <i class="iconfont icon-fontbgcolor" @click="format('backgroundColor', '#f00')"></i>

            <!-- 删除所选区域文本样式 -->
            <i class="iconfont icon-clearedformat" @click="handleEvent('removeFormat')"></i>

            <!-- 设置文本字体 -->
            <i class="iconfont icon-font" @click="format('fontFamily', '')"></i>

            <!-- 设置行高 -->
            <i class="iconfont icon-line-height" @click="format('lineHeight', '')"></i>

            <!-- 文本左对齐 -->
            <i class="iconfont icon-zuoduiqi" @click="format('align', 'left')"></i>

            <!-- 文本居中 -->
            <i class="iconfont icon-juzhongduiqi" @click="format('align', 'center')"></i>

            <!-- 文本右对齐 -->
            <i class="iconfont icon-youduiqi" @click="format('align', 'left')"></i>

            <!-- 文本两端对齐 -->
            <i class="iconfont icon-zuoyouduiqi" @click="format('align', 'justify')"></i>

            <!-- 字体加粗 -->
            <i class="iconfont icon-zitijiacu" @click="format('bold', '')"></i>

            <!-- 文本下划线 -->
            <i class="iconfont icon-zitixiahuaxian" @click="format('textDecoration', 'underline')"></i>

            <!-- 文本中划线 -->
            <i class="iconfont icon-zitishanchuxian" @click="format('textDecoration', 'line-through')"></i>

            <!-- 斜体 -->
            <i class="iconfont icon-zitixieti" @click="format('italic', '')"></i>

            <!-- 字体紧密程度 -->
            <i class="iconfont icon-Character-Spacing" @click="format('letterSpacing', '')"></i>

            <!-- 插入图片 -->
            <i class="iconfont icon-charutupian" @click="insertImage()"></i>


            <!--      <i class="iconfont icon-fuzhi" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-preview" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-date" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-723bianjiqi_duanhouju" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-722bianjiqi_duanqianju" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon&#45;&#45;checklist" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-quanping" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-direction-rtl" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-direction-ltr" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-selectall" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-shanchu" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-bianjisekuai" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-fengexian" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-dianzan" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-charulianjie" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-wuxupailie" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-yinyong" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-youxupailie" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-zitidaima" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-xiaolian" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-zitishangbiao" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-zitibiaoti" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-zitiyanse" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-zitiyulan" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-zitixiabiao" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-duigoux" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-guanbi" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-shengyin_shiti" @click="insertImage"></i>-->
            <!--      <i class="iconfont icon-baocun" @click="insertImage"></i>-->
          </view>

          <editor id="editor" class="ql-container" :placeholder="'请输入'" @ready="onEditorReady"></editor>
        </view>
      </view>
    </view>

    <u-button type="primary" class="mt-60" @click="exportContent">保存</u-button>

    <u-picker mode="multiSelector" v-model="show" :default-selector='[0, 0]' :range="medicineClassifyList"
              range-key="name" @columnchange="columnChange" @confirm="confirmChange" @cancel="show = false"></u-picker>
  </view>
</template>

<script>
import {upload} from "../../common/common";
import {baseUrl} from "../../common/http";

export default {
  name: "edit_shop",
  data() {
    return {
        medicine_id: '',
        thumb_id: [],
        name: '',
        detail: '',
        classify_id: [],
      medicineClassify: [],
      childList:[],
      medicineClassifyList:[],
      select_tips: '请选择商家分类',
      show: false,
      img_url: "../../static/upload-icon.png",
      imgUrlList:[],
      editorCtx:'',
      details:''
    }
  },
  onLoad(options) {
    this.medicine_id = options.id
    this.getGoodsDetails()
  },
  onShow() {
    this.getMedicineClassify()
  },
  methods: {

    async getGoodsDetails() {
      this.$http('/api/mall/getMedicineDetail', {
        medicine_id: this.medicine_id
      }, "GET").then(res => {
        this.details = res
        this.name = res.name
        this.detail = res.detail
        this.editorCtx.setContents({
          html:res.detail
        })
        this.imgUrlList = res.thumb_url.map(item=>{
          return {img_id:item.img_id, img_url:item.img_Url}
        })
        this.select_tips = res.classify_name
        this.classify_id[0] = res.classify_first_id
        this.classify_id[1] = res.classify_second_id

      });
    },

    getMedicineClassify() {
      this.$http('/api/mall/getMedicineClassify',
          {medicine_id: this.medicine_id, pid: ''}, "GET").then(res => {
        this.medicineClassify = res
        this.getMedicineClassifyChild(res[0].id)
      })
    },
    getMedicineClassifyChild(pId) {
      this.$http('/api/mall/getMedicineClassify',
          {medicine_id: this.medicine_id, pid: pId}, "GET").then(res => {
        this.childList = res
        this.medicineClassifyList = []
        this.medicineClassifyList.push(this.medicineClassify,this.childList)
      })
    },
    columnChange({column,index}){
      console.log(column)
      if (column===0){
        this.getMedicineClassifyChild(this.medicineClassify[index].id)
      }
    },
    confirmChange(obj){
      const pIndex = obj[0]
      const index = obj[1]
      // const pId = this.medicineClassify[pIndex].id
      // const id = this.childList[index].id
      this.select_tips = this.medicineClassify[pIndex].name + ' - ' + this.childList[index].name
      // this.classify_id.push(pId,id)
      this.classify_id[0] = this.medicineClassify[pIndex].id
      this.classify_id[1] = this.childList[index].id
    },

    // 上传图片
    chooseImg() {
      upload(5).then(data => {
        this.imgUrlList.push({img_id:data[0].img_id, img_url:data[0].img_url})
      })
    },
    delImg(i){
      this.imgUrlList = this.imgUrlList.filter((item,index)=>{
        return index !== i
      })
    },


    submit(){
      this.thumb_id = []
      this.imgUrlList.map(item=>{
        this.thumb_id.push(item.img_id)
      })

      console.log(this.medicine_id,
          this.thumb_id,
          this.name,
          this.detail,
          this.classify_id,666)

      this.$http('/api/mall/saveMedicine',{
        medicine_id:this.medicine_id,
        thumb_id:this.thumb_id,
        name: this.name,
        detail:this.detail,
        classify_id:this.classify_id
      },"POST").then(data=>{
        // this.$store.dispatch('updateUserInfo')
        uni.showToast({
          title: '保存成功',
          icon:'none'
        })
        setTimeout(()=>{
          uni.navigateBack({
            detail: 1,
          })
        },1000)
      }).catch(data=>{

      })
    },


    // 商家简介
    onEditorReady() {
      uni.createSelectorQuery().select('#editor').context((res) => {
        this.editorCtx = res.context
      }).exec()
    },

    // 操作类型
    handleEvent(name) {
      this.editorCtx[name]()
    },


    // 文本处理
    format(name, value) {
      this.editorCtx.format(name, value);
    },


    // 插入图片
    insertImage() {
      const uploadImgV2 = "https://jchelper-dev.dindong.cn/file/upload-img-v2";

      // uni.chooseImage({
      //   count: 1,
      //   mediaType: ['image'],
      //   sourceType: ['album', 'camera'],
      //   success: res => {
      //     uni.showLoading('上传中', true)
      //     uni.uploadFile({
      //       url: baseUrl + '/api/file/upload-img',
      //       filePath: res.tempFilePaths[0],
      //       name: 'photo',
      //       success: res => {
      //         const data = JSON.parse(res.data)
      //         this.editorCtx.insertImage({
      //           src: data.data.img_url, //图片地址
      //           // width: '100%', //设置宽度属性
      //           success: () => {
      //             uni.hideLoading()
      //             uni.showToast('上传成功', 'success')
      //           },
      //           fail: () => {
      //             uni.hideLoading()
      //             uni.showToast('上传失败', 'error')
      //           }
      //         })
      //       },
      //       fail: err => {
      //         console.log(err)
      //         uni.hideLoading()
      //         uni.showToast('上传失败', 'error')
      //       }
      //     })
      //
      //   },
      //   fail:()=>{
      //     console.log(err)
      //     uni.hideLoading()
      //   }
      // })

      upload(5).then(data => {
            this.editorCtx.insertImage({
              // src: data.data.img_url, //图片地址
              src:data[0].img_url
            })
      })
    },


    // 获取富文本内容
    exportContent() {
      this.editorCtx.getContents({
        success: res => {
          console.log(res.html)
          this.detail=res.html
          this.submit()
        },
        fail: err => {

        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.edit-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 0 0 50rpx;

  .form {
    .info {
      padding: 26rpx 32rpx;
      display: flex;
      flex-direction: row;
      background-color: #FFFFFF;

      .info-title {
        width: 25%;
        height: 70rpx;
        line-height: 70rpx;
        font-weight: bold;
      }

      .info-input {
        width: 75%;
        height: 70rpx;
      }
      /deep/ .uni-input-input:disabled{
        color: #999999;
      }
    }

    .info2{
      padding: 26rpx 32rpx;
      background-color: #FFFFFF;
      margin-top: 10rpx;
      .info-title {
        height: 70rpx;
        line-height: 70rpx;
        font-weight: bold;
      }
      .img-box{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .img{
          width: 120rpx;
          height: 120rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
        }

        .img-item{
          width: 120rpx;
          height: 120rpx;
          position: relative;
          padding: 20rpx;
          .img-icon{
            position: absolute;
            top: 0;
            right: 0;
            width: 50rpx;
            height: 50rpx;
            z-index: 9;
          }
        }
      }
      .img-box:nth-last-child(1){
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: start;
      }
    }

    .active {
      background-color: #FFFFFF !important;

      /deep/ .u-cell__value {
        color: grey !important;
      }
    }

    .editor-container {
      padding: 10px;

      .ql-container {
        border: 2rpx solid #e6e6e6;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        font-size: 16px;
        line-height: 1.5;
        overflow: auto;
        padding: 10px 10px 20px 10px;
      }

      .edit-area {
        display: flex;
        flex-wrap: wrap;
        padding: 30rpx 20rpx;
        margin-bottom: 20rpx;
        background-color: #f5f5f5;

        .iconfont {
          margin: 10rpx 20rpx;
          font-size: 40rpx;
        }
      }
    }

    #editor {
      width: 100%;
      height: 300px;
      background-color: #f8f8f8;
    }
  }
}
</style>
